<template>
      <el-row :gutter="10">
        <el-col :span="5">
          <template v-for="item in indexIndicators">
            <div class="card-item">
              <div class="card-title">{{ item.title }}</div>
              <div class="card-body" style="height: 11.458vw;">
                <template v-if="item.type == 'vitalityIndicators'">
                  <vitalityIndicators></vitalityIndicators>
                </template>
                <template v-else-if="item.type == 'businessIndicators'">
                  <businessIndicators></businessIndicators>
                </template>
                <template v-else="item.type == 'competitivenessIndicators'">
                  <competitivenessIndicators></competitivenessIndicators>
                </template>
              </div>
            </div>
          </template>
        </el-col>
        <el-col :span="14">
          <div class="card-header">
            <ul>
              <li v-for="item in achievement">
                <div> {{ item.date }}</div>
                <div>
                  <div>{{ item.percentage }}{{ item.unit }}</div>
                  <div v-if="item.district" :style="{backgroundColor: 'rgba(0,0,0,.05)'}">
                    区属：{{ item.district }}{{ item.unit }}
                  </div>
                  <div v-else></div>
                </div>
                <div style="display: flex;align-items: center;justify-content: center">
                  <span style="margin-right: 5px">{{ item.title }}</span>
                  <component :is="item.icon" :style="{width:'20px',height:'20px',color:item.color}"/>
                </div>
              </li>
            </ul>
          </div>
          <div style="height: 570px;margin-bottom:20px;">
            <main-map></main-map>
          </div>
          <div class="card-item" style="height: 8.854vw">
            <div class="card-title">企业数据 <span>2024年1-4月</span></div>
            <div class="card-body card-date">
              <div v-for="item in enterpriseData">
                <ul style="display: flex;align-items: center;justify-content: center">
                  <li v-for="item2 in item.child" style="width: 100%;text-align: left">
                    <span>
                      <strong style="font-size: 18px">{{ item2.num }}</strong> {{ item2.unit }}
                    </span>
                  </li>
                  <li>
                    <div
                        style="background-color: #e7ecf6;padding:10px 10px 5px 10px;border-radius: 50%;box-sizing: border-box">
                      <component :is="item.icon" :style="{width:'20px',height:'20px',color:'#2167fa'}"/>
                    </div>
                  </li>
                </ul>
                <div style="width: 100%;text-align: left;margin-top: 5px;font-size: 16px;font-weight: bold">
                  {{ item.title }}
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="card-item">
            <div class="card-title">宏观数据</div>
            <div class="card-body" style="height: 15.625vw;">
              <ul class="card-ranking">
                <li>
                  <component is="Histogram" :style="{width:'20px',height:'20px',color:'#2167fa'}"/>
                  <span>GDP增速 </span> <strong style="color:#2167fa;">5.7%</strong></li>
                <li>
                  <component is="Promotion" :style="{width:'20px',height:'20px',color:'#ffb262'}"/>
                  <span>全市排名 </span> <strong style="color:#ffa33c;">2</strong></li>
              </ul>
              <div style="height: 250px;margin-top: 20px">
                <macroData></macroData>
              </div>
            </div>
          </div>
          <div class="card-item">
            <div class="card-title">工业数据</div>
            <div class="card-body" style="height: 22.65625vw;">
              <ul class="card-ranking">
                <li :style="{backgroundColor: 'rgba(122, 201, 105,.08)'}">
                  <component is="Menu" :style="{width:'20px',height:'20px',color:'#77c98d'}"/>
                  <span>总产值 </span> <strong style="color:#77c98d;">365.79 <small
                    style="color: #cccccc">亿</small></strong></li>
                <li>
                  <component is="TrendCharts" :style="{width:'20px',height:'20px',color:'#ffb262'}"/>
                  <span>产值增速排名 </span> <strong style="color:#ffa33c;">5</strong></li>
              </ul>
              <ul class="card-project">
                <li v-for="item in industrialList">
                  <div>{{ item.title }}</div>
                  <div><strong style="font-size: 18px">{{ item.count }}</strong> <small
                      style="color: #999999">{{ item.unit }}</small></div>
                </li>
              </ul>
              <div class="card-chart">
                <industrial-data></industrial-data>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
</template>

<script setup>
import {onMounted, onUnmounted, ref} from "vue";
import vitalityIndicators from '../Echarts/vitalityIndicators.vue'
import businessIndicators from '../Echarts/businessIndicators.vue'
import competitivenessIndicators from '../Echarts/competitivenessIndicators.vue'
import macroData from '../Echarts/macroData.vue'

import IndustrialData from "@/views/newEcoIndicators/Echarts/industrialData.vue";
import MainMap from "@/views/newEcoIndicators/Echarts/mainMap.vue";

//左侧图表相关
const indexIndicators = ref([
  {
    title: '区域经济活力指数',
    type: 'vitalityIndicators'
  },
  {
    title: '规上工业企业景气指标',
    type: 'businessIndicators'
  },
  {
    title: '制造业竞争力指数',
    type: 'competitivenessIndicators'
  }
])

//产值数据
const achievement = ref(
    [
      {
        "date": "2024年1-4月",
        "title": "规上工业产值增速",
        "percentage": "0",
        "district": "0.0",
        "unit": "%",
        "color": "#ffb262",
        "icon": "HelpFilled"
      },
      {
        "date": "2024年1-4月",
        "title": "增加值增速",
        "percentage": "5.2",
        "district": "6.4",
        "unit": "%",
        "color": "#91e0ca",
        "icon": "Promotion"
      },
      {
        "date": "2024年1-4月",
        "title": "亩均产值(万元/亩)",
        "percentage": "652.35",
        "district": "498.19",
        "unit": "",
        "color": "#b1c8ff",
        "icon": "Histogram"
      },
      {
        "date": "2024年1-4月",
        "title": "亩均税收(万元/亩)",
        "percentage": "164.4",
        "district": "",
        "unit": "",
        "color": "#ffbcad",
        "icon": "Grid"
      }
    ]
)

//企业数据
const enterpriseData = ref([
  {
    "title": "规上企业数",
    "icon": "StarFilled",
    "child": [
      {
        "num": 744,
        "unit": "家"
      }
    ]
  },
  {
    "title": "本年新增规上企业",
    "icon": "Menu",
    "child": [
      {
        "num": 27,
        "unit": "家"
      }
    ]
  },
  {
    "title": "新增资产过亿企业数",
    "icon": "Histogram",
    "child": [
      {
        "num": 0,
        "unit": "家",
        "total": 10
      },
      {
        "num": 0,
        "unit": "家",
        "total": 5
      },
      {
        "num": 0,
        "unit": "家",
        "total": 1
      }
    ]
  }
])
//工业数据
const industrialList = ref([
  {
    "title": "工业投资项目",
    "count": 295,
    "unit": "个"
  },
  {
    "title": "本年计划投产项目",
    "count": 15,
    "unit": "个"
  }, {
    "title": "总计划投资",
    "count": 253.89,
    "unit": "亿元"
  }, {
    "title": "本年投资完成进度",
    "count": 70,
    "unit": "%"
  }
])


</script>


<style scoped lang="scss">


.card-item {
  background-color: #ffffff;
  position: relative;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 5px;
  margin-bottom: 15px;

  &:before {
    position: absolute;
    top: 10px;
    left: 0;
    content: "";
    width: 4px;
    height: 30px;
    background-color: #3b77e3;
  }

  .card-title {
    padding-left: 10px;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    color: #333333;

    > span {
      font-size: 12px;
      font-weight: normal;
      padding: 2px 10px;
      border-radius: 3px;
      background-color: rgba(0, 0, 0, .05);
    }
  }

  .card-body {
    margin-top: 10px;
    width: 100%;
    height: calc(100% - 45px);
  }

  .card-date {
    display: flex;
    justify-content: space-between;
    align-items: center;

    > div {
      width: calc(25% - 20px);
      height: 100%;
      padding: 20px;
      box-sizing: border-box;
      background-color: #fafbfd;
    }

    > div:last-child {
      width: 50%;
    }
  }

  .card-ranking {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    > li {
      width: 48%;
      height: 40px;
      line-height: 40px;
      padding: 0 20px;
      box-sizing: border-box;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    > li:first-child {
      background-color: #edf6ff;
    }

    > li:last-child {
      background-color: #fff8eb;
    }
  }
}

.card-header {
  margin-bottom: 15px;

  ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    border-radius: 5px;

    li {
      width: 24%;
      background-color: #ffffff;
      padding: 15px 10px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;

      > div:nth-child(1) {
        padding: 5px 20px;
        font-size: 12px;
        background-color: rgba(0, 0, 0, .05);
      }

      > div:nth-child(2) {
        margin-top: 10px;
        display: flex;
        justify-content: center;
        align-items: baseline;

        > div:first-child {
          font-size: 23px;
          font-weight: bold;
          margin-right: 20px;
        }

        > div:last-child {
          font-size: 12px;
          border-radius: 5px;
          padding: 1px 10px;
        }
      }

      > div:nth-child(3) {
        margin-top: 5px;
        font-size: 14px;
      }
    }
  }
}

.card-project {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px;

  > li {
    text-align: left;
    width: 48%;
    padding: 10px 20px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, .025);
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 14px;
  }
}

.card-chart {
  height: 10.9375vw;
}
</style>
